<template>
	<div class="container">
		<!-- 统计信息 -->
		<div class="card">
			<div class="stats">
				<div class="stat-item">
					<div class="stat-number">{{ pendingTodos.length }}</div>
					<div class="stat-label">待完成</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">{{ completedTodos.length }}</div>
					<div class="stat-label">已完成</div>
				</div>
			</div>
		</div>

		<!-- 添加待办事项 -->
		<div class="card">
			<div class="add-todo">
				<input class="input" v-model="newTodoText" placeholder="请输入待办事项..." @confirm="addTodo" />
				<button class="btn btn-primary" @click="addTodo">添加</button>
			</div>
		</div>

		<!-- 待办事项列表 -->
		<div class="card">
			<div class="section-title">待完成 ({{ pendingTodos.length }})</div>
			<div v-if="pendingTodos.length === 0" class="empty">
				<div class="empty-icon">📝</div>
				<div>暂无待办事项</div>
			</div>
			<div v-else>
				<div class="todo-item" v-for="todo in pendingTodos" :key="todo.id">
					<div class="todo-content">
						<div class="todo-checkbox" @click="toggleTodo(todo.id, true)">
							<div class="checkbox-empty"></div>
						</div>
						<div class="todo-text">{{ todo.text }}</div>
					</div>
					<div class="todo-actions">
						<div class="todo-time">{{ todo.createTime }}</div>
						<button class="btn btn-danger btn-small" @click="deleteTodo(todo.id)">删除</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 已完成事项 -->
		<div class="card">
			<div class="section-title">已完成 ({{ completedTodos.length }})</div>
			<div v-if="completedTodos.length === 0" class="empty">
				<div class="empty-icon">✅</div>
				<div>暂无已完成事项</div>
			</div>
			<div v-else>
				<div class="todo-item completed" v-for="todo in completedTodos" :key="todo.id">
					<div class="todo-content">
						<div class="todo-checkbox" @click="toggleTodo(todo.id, false)">
							<div class="checkbox-checked">✓</div>
						</div>
						<div class="todo-text">{{ todo.text }}</div>
					</div>
					<div class="todo-actions">
						<div class="todo-time">{{ todo.createTime }}</div>
						<button class="btn btn-danger btn-small" @click="deleteTodo(todo.id)">删除</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				newTodoText: ''
			}
		},
		computed: {
			...mapState(['todos']),
			...mapGetters(['completedTodos', 'pendingTodos'])
		},
		methods: {
			...mapActions(['addTodo', 'updateTodo', 'deleteTodo']),

			addTodo() {
				if (!this.newTodoText.trim()) {
					uni.showToast({
						title: '请输入待办事项',
						icon: 'none'
					})
					return
				}

				const todo = {
					id: Date.now(),
					text: this.newTodoText.trim(),
					completed: false,
					createTime: new Date().toLocaleString('zh-CN')
				}

				this.$store.dispatch('addTodo', todo)
				this.newTodoText = ''

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
			},

			toggleTodo(id, completed) {
				this.$store.dispatch('updateTodo', {
					id,
					completed
				})
			},

			deleteTodo(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个待办事项吗？',
					success: (res) => {
						if (res.confirm) {
							this.$store.dispatch('deleteTodo', id)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.stat-item {
		flex: 1;
	}

	.stat-number {
		font-size: 48rpx;
		font-weight: bold;
		color: #007aff;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.add-todo {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}

	.add-todo .input {
		flex: 1;
		margin-bottom: 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.todo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.todo-item:last-child {
		border-bottom: none;
	}

	.todo-item.completed {
		opacity: 0.7;
	}

	.todo-item.completed .todo-text {
		text-decoration: line-through;
		color: #999;
	}

	.todo-content {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex: 1;
	}

	.todo-checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.checkbox-empty {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: transparent;
	}

	.checkbox-checked {
		color: #4cd964;
		font-size: 24rpx;
		font-weight: bold;
	}

	.todo-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.todo-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.todo-time {
		font-size: 24rpx;
		color: #999;
	}

	.empty {
		text-align: center;
		padding: 80rpx 20rpx;
		color: #999;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
</style>